<template>
    <div style="background-color: #F0F0F7">
        <el-row  class="top_div">
            <el-col :span="24">
                <span>
                    <el-input
                            size="small"
                            style="width: 120px;margin: 5px"
                            placeholder="订单编号"
                            v-model="searchs.id"
                            clearable>
                    </el-input>
                </span>
                <span>
                    <el-input
                            size="small"
                            style="width: 120px;margin: 5px"
                            placeholder="乘客名称"
                            v-model="searchs.name"
                            clearable>
                    </el-input>
                </span>
                <span>
                    <el-select
                            clearable
                            v-model="searchs.bus"
                            filterable
                            placeholder="乘坐车辆"
                            size="small"
                            style="width: 120px;margin: 5px">
                        <el-option  v-for="item in buses"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"></el-option>
                   </el-select>
                </span>
                <span>
                    <!--<b>出发地点:</b>-->
                   <el-select
                           clearable
                           v-model="searchs.origin"
                           filterable
                           placeholder="出发地点"
                           size="small"
                           style="width: 120px;margin: 5px">
                        <el-option  v-for="item in origins"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"></el-option>
                   </el-select>
                </span>


                <span>
                    <!--<b>目的地点:</b>-->
                    <el-select
                            clearable
                            v-model="searchs.destination"
                            filterable
                            placeholder="目的地点"
                            size="small"
                            style="width: 120px;margin: 5px">
                        <el-option  v-for="item in destinations"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"></el-option>
                   </el-select>
                </span>

                <span>
                    <!--<b>目的地点:</b>-->
                    <el-date-picker type="date" size="small"  placeholder="开始日" v-model="searchs.begin" style="width: 130px;margin: 5px"></el-date-picker>
                    <el-date-picker type="date" size="small"  placeholder="截止日" v-model="searchs.end" style="width: 130px;margin: 5px"></el-date-picker>

                </span>
                <span>
                  <el-select
                          clearable
                          v-model="searchs.status"
                          filterable
                          placeholder="订单状态"
                          size="small"
                          style="width: 120px;margin: 5px">
                        <el-option  v-for="item in statuses"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"></el-option>
                  </el-select>
                  <el-button type="primary" size="small" icon="el-icon-search" style="margin: 5px" @click="searchOrder()">查询</el-button>
                </span>
            </el-col>
        </el-row>
        <el-row>
            <el-table
                highlight-current-row
                v-loading="loading"
                :data="Orders.filter(data => !search || data.client.clname.toLowerCase().includes(search.toLowerCase()) || data.orid==search)"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="orid"
                    label="订单编号"
                    width="110">
            </el-table-column>
            <el-table-column
                    prop="bnum"
                    label="乘坐车辆"
                    width="120">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>司机: {{ scope.row.bus.driver.ename }}</p>
                        <p>车型: {{ scope.row.bus.bmodel }}</p>
                        <p>电话: {{ scope.row.bus.driver.ephone }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.bus.bnum }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="client.clname"
                    label="乘客姓名"
                    width="120">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top" v-if="scope.row.client!=null">
                        <p>姓名: {{ scope.row.client.clname }}</p>
                        <p>身份证号: {{ scope.row.client.clidcard }}</p>
                        <p>电话: {{ scope.row.client.clphone }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.client.clname }}</el-tag>
                        </div>
                    </el-popover>
                    <el-popover trigger="hover" placement="top" v-if="scope.row.client==null">
                        <p>会员信息已删除</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium" type="info">已删除</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="origin"
                    label="出发地点"
                    width="130">
            </el-table-column>
            <el-table-column
                    prop="destination"
                    label="目的地"
                    width="130">
            </el-table-column>
            <el-table-column
                    prop="beginTime"
                    label="出发时间"
                    sortable
                    width="170">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>预计行程时间: {{ scope.row.expectTime}} 小时</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.beginTime }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="seller.sellerName"
                    label="售票员">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.seller.ename }}</p>
                        <p>住址: {{ scope.row.seller.eaddress }}</p>
                        <p>电话: {{ scope.row.seller.ephone }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.seller.ename }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="订单创建时间"
                    width="170">
            </el-table-column>
            <el-table-column
                    prop="costStatus"
                    label="缴费">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>费用: {{ scope.row.cost }}元</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium" type="info" v-if="scope.row.costStatus==0">未支付</el-tag>
                            <el-tag size="medium" type="success" v-if="scope.row.costStatus==1">已支付</el-tag>
                            <el-tag size="medium" type="primary" v-if="scope.row.costStatus==2">派车中</el-tag>
                            <el-tag size="medium" type="primary" v-if="scope.row.costStatus==3">进行中</el-tag>
                            <el-tag size="medium" type="success" v-if="scope.row.costStatus==4">订单完成</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    width="210"
                    align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            prefix-icon="el-icon-search"
                            placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="info"
                            @click="dialog = true">新增</el-button>
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-popconfirm
                            confirmButtonText='好的'
                            cancelButtonText='不用了'
                            icon="el-icon-info"
                            iconColor="red"
                            title="确定删除该订单信息吗？"
                            @onConfirm="handleDelete(scope.$index, scope.row)"
                    >
                        <el-button
                                style="margin-left: 10px;"
                                slot="reference"
                                size="mini"
                                type="danger"
                                @click="">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>

            <!--新增订单面板-->
            <el-drawer
                    :append-to-body="true"
                    :before-close="handleClose"
                    :visible.sync="dialog"
                    custom-class="demo-drawer"
                    ref="drawer">
                <!-- :append-to-body="true" 解决全部黑屏，无法关闭抽屉的情况 -->

                <div class="demo-drawer__content" style="margin-top: -40px">
                    <h3 style="text-align: center">添加订单信息</h3>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" size="medium">
                        <el-form-item label="出发地点" prop="origin">
                            <el-select v-model="ruleForm.origin" filterable placeholder="请手动选择地点">
                                <el-option  v-for="item in origins"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="目的地" prop="destination">
                            <el-select v-model="ruleForm.destination" placeholder="请手动选择地点">
                                <el-option  v-for="item in destinations"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="出发时间" required style="width: 90%">
                            <el-col :span="11">
                                <el-form-item prop="date1">
                                    <el-date-picker type="date" size="mini"  placeholder="选择日期" v-model="ruleForm.date1" style="width: 130px;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                                <el-form-item prop="date2">
                                    <el-time-picker size="mini" placeholder="选择时间" v-model="ruleForm.date2" style="width: 110px;"></el-time-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="快车" prop="delivery">
                            <el-switch v-model="ruleForm.delivery"></el-switch>
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="ruleForm.name" style="width:auto;"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" prop="phone">
                            <el-input type="phone" maxlength="11"  v-model.number="ruleForm.phone" autocomplete="off" style="width:auto;"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="idCard">
                            <el-input v-model="ruleForm.idCard" style="width:auto;" maxlength="18"></el-input>
                        </el-form-item>
                        <el-form-item label="售票员" prop="clId">
                            <el-select v-model="ruleForm.clId" filterable placeholder="售票员" style="width: 100px;">
                                <el-option  v-for="item in emps"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="票价" prop="cost">
                            <el-input type="number" v-model.number="ruleForm.cost" style="width:80px;"></el-input> 元
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="Submit" :loading="loading">{{ loading ? '提交中 ...' : '提交订单' }}</el-button>
                            <el-button @click="cancelForm">取 消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-drawer>
            <EditOrder
                    :dataOrder="dialogOrder"
                    :append-to-body="true">
            </EditOrder>
        </el-table>
        </el-row>
        <el-row style="text-align: center;background-color: white;padding: 17px;">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :total="total"
                    :page-count="pageTotal"
                    @current-change=page>
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
    import EditOrder from '../components/EditOrder.vue'
    export default {
        name: "OrderList",
        inject:['reload'],
        components:{EditOrder},
        data() {
            return {
                Orders: [],
                input:null,
                origins: null,    //下拉列表框
                destinations: null,
                emps: null,
                buses: null,
                statuses:null,
                loading:false,
                search:'',
                searchs:{
                    origin: null,
                    destination: null,
                    begin: null,
                    end: null,
                    name: null,
                    id: null,
                    bus:null,
                    status:null,
                },
                dialog: false,
                //传递给编辑页面当前行的数据
                dialogOrder:{},
                //当前表单数据
                ruleForm: {
                    origin: '',
                    destination: '',
                    date1: '',
                    date2: '',
                    name: '',
                    phone: '',
                    idCard: '',
                    clId: '',
                    cost: '',
                    delivery: false,
                },
                rules: {
                    origin: [
                        { required: true, message: '请选择出发地点', trigger: 'change' }
                    ],
                    destination: [
                        { required: true, message: '请选择目的地', trigger: 'change' }
                    ],
                    date1: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    name: [
                        { required: true, message: '请输入乘客姓名', trigger: 'blur' },
                        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入电话',trigger: 'blur'},
                        { type: 'number', message: '电话必须为数字值', trigger: 'blur'},
                    ],
                    idCard: [
                        { required: true, message: '请输入身份证号码',trigger: 'blur'},
                    ],
                    clId: [
                        { required: true, message: '请选择售票员',trigger: 'blur'},
                    ],
                    cost: [
                        { required: true, message: '请输入票价',trigger: 'blur'},
                        { type: 'number', message: '电话必须为数字值', trigger: 'blur'},
                    ],
                },
                formLabelWidth: '80px',
                timer: null,

                //分页条绑定的pageInfo信息
                pageSize:5,
                currentPage:1,
                pageTotal:0,
                total:0,
            }
        },
        mounted(){
            this.getData();
        },
        methods:{
            async getData(){
                await this.axios.get("/option/getAllOption").then(res=>{
                    //console.log(res.data.emps);
                    this.origins=res.data.origins;
                    this.destinations=res.data.destinations;
                    this.emps=res.data.emps;
                    this.statuses=res.data.status;
                    this.buses=res.data.buses;
                });
            },
            handleEdit(index, row) {
                this.$store.commit('setDialog',true);
                this.dialogOrder=row;
                //编辑;
            },
            handleDelete(index, row) {
                //删除
                //alert("确定删除"+row.orid);
                let id=new URLSearchParams();
                id.append("id",row.orid);
                setTimeout(() => {
                    this.axios.post("/order/delete",id)
                        .then(res=>{
                            if (res.data==""){
                                this.$message({
                                    message: "权限不足,请联系高级管理员",
                                    type: 'error'
                                });
                            }else{
                                this.$message({
                                    message: res.data,
                                    type: 'success'
                                });
                            }
                            //重新渲染（CSDN上的快速刷新页面）
                            this.reload();
                        });
                    this.loading = false;
                }, 600);
            },
            handleClose(done) {
                done();
                //点击抽屉以外，直接回到列表页面
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },
            cancelForm() {
                //点击取消按钮
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },
            Submit(done) {
                //点击提交按钮
                if (this.loading) {
                    return;
                }
                //验证表单
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        //console.log('表单验证通过！');
                        this.$confirm('确定要提交表单吗？')
                            .then(_ => {
                                //提交表单
                                //alert("提交表单");
                                this.loading = true;
                                this.timer = setTimeout(() => {
                                    //封装出发/结束时间
                                    let date1=this.ruleForm.date1;
                                    let date2=this.ruleForm.date2;
                                    let beginTime=new Date(date1.getFullYear(),date1.getMonth(),date1.getDate(),date2.getHours(),date2.getMinutes(),date2.getSeconds());
                                    let endTime=new Date(date1.getFullYear(),date1.getMonth(),date1.getDate(),date2.getHours()+5,date2.getMinutes(),date2.getSeconds());
                                    //封装录入乘客信息
                                    let client = new URLSearchParams();
                                    client.append('clname', this.ruleForm.name);
                                    client.append('clphone', this.ruleForm.phone);
                                    client.append('clidcard',this.ruleForm.idCard);
                                    client.append('registertime',new Date());
                                    this.axios.post("/client/add",client).then(res=>{
                                        //获取乘客id
                                        let clientid=res.data;

                                        //获取车辆id

                                        //封装订单类
                                        let order = new URLSearchParams();
                                        order.append('origin', this.ruleForm.origin);
                                        order.append('destination', this.ruleForm.destination);
                                        order.append('beginTime',beginTime);
                                        order.append('endTime',endTime);
                                        order.append('node',"没有留下备注");
                                        order.append('clientid', clientid);
                                        order.append('busid', 1);
                                        order.append('sellerid', this.ruleForm.clId);
                                        order.append('cost', this.ruleForm.cost);
                                        order.append('createTime', new Date());
                                        order.append('costStatus', 0);
                                        // 动画关闭需要一定的时间
                                        setTimeout(() => {
                                            this.axios.post("/order/add",order)
                                                .then(res=>{
                                                    this.$message({
                                                        message: '订单创建成功',
                                                        type: 'success'
                                                    });
                                                    //重新渲染（CSDN上的快速刷新页面）
                                                    this.reload();
                                                });
                                            this.loading = false;
                                        }, 400);
                                    });
                                }, 500)
                            })
                            .catch(_ => {
                                //不提交表单，回到列表页面
                                this.loading = false;
                                this.dialog = false;
                                clearTimeout(this.timer);
                            });
                    } else {
                        //表单验证失败
                        this.$message.error('请正确填写订单信息');
                        //console.log('error submit!!');
                        return false;
                    }
                });

            },

            //分页
            page(currentPage){
                let _this=this;
                _this.loading=true;
                _this.axios.get("/order/queryAllByPageHelper?pageSize=11&currentPage="+currentPage).then(res=>{
                    _this.currentPage=res.data.pageNum;
                    _this.pageTotal=res.data.pages;
                    _this.total=res.data.total;
                    _this.pageSize=res.data.pageSize;
                    let orders=[];
                    for (let i = 0; i < res.data.list.length; i++) {
                        let list=res.data.list[i];
                        orders[i]={
                            orid: list.orid,
                            bus:list.bus,
                            origin: list.origin,
                            destination: list.destination,
                            beginTime: list.beginTime,
                            endTime: list.endTime,
                            expectTime: Math.ceil((new Date(list.endTime)-new Date(list.beginTime))/3600000),
                            client: list.client,
                            seller: list.seller,
                            createTime: list.createTime,
                            cost: list.cost,
                            costStatus: list.costStatus
                        };
                    }
                    this.Orders=orders;
                    _this.loading=false;
                });
            },

            //搜索
            searchOrder(){
                let search = new URLSearchParams();
                let id=this.searchs.id;
                let name=this.searchs.name;
                let bus=this.searchs.bus;
                let origin=this.searchs.origin;
                let destination=this.searchs.destination;
                let begin=this.searchs.begin;
                let end=this.searchs.end;
                let status=this.searchs.status;
                if (id!=null && id!=""){
                    search.append('id', id);
                }
                if (name!=null && name!=""){
                    search.append('name', name);
                }
                if (bus!=null && bus!=""){
                    search.append('bus',bus);
                }
                if (origin!=null && origin!=""){
                    search.append('origin',origin);
                }
                if (destination!=null && destination!=""){
                    search.append('destination',destination);
                }
                if (begin!=null && begin!=""){
                    search.append('begin',begin);
                } if (end!=null && end!=""){
                    search.append('end',end);
                } if (status!=null && status!=""){
                    search.append('status',status);
                }
                search.append('pageSize',20);

                search.append('currentPage',this.currentPage);

                this.loading=true;

                this.axios.post("/order/search",search).then(res=>{
                    console.log(res.data)

                    this.currentPage=res.data.pageNum;
                    this.pageTotal=res.data.pages;
                    this.total=res.data.total;
                    this.pageSize=res.data.pageSize;
                    let orders=[];
                    for (let i = 0; i < res.data.list.length; i++) {
                        let list=res.data.list[i];
                        orders[i]={
                            orid: list.orid,
                            bus:list.bus,
                            origin: list.origin,
                            destination: list.destination,
                            beginTime: list.beginTime,
                            endTime: list.endTime,
                            expectTime: Math.ceil((new Date(list.endTime)-new Date(list.beginTime))/3600000),
                            client: list.client,
                            seller: list.seller,
                            createTime: list.createTime,
                            cost: list.cost,
                            costStatus: list.costStatus
                        };
                    }
                    this.Orders=orders;
                    this.loading=false;
                });
            }
        },

        created(){
            this.page(1);
        }
    }
</script>

<style scoped>
    /*滚动条的宽度*/
    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 6px;
        height: 7px;

    }
    /*滚动条滑块*/
    /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: pink;
        /*border-radius: 3px;*/
    }

    .top_div{
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 40px;
        margin-top: 10px;
        margin-bottom: 30px;
        background-color: white;
    }
</style>
